<template>
  <CDrawer
    v-model:visible="drawerVisible"
    size="large"
    title="数据质量评分规则"
    :close-on-press-escape="true"
    @close="handleClose"
  >
    <div class="rule-wrap">
      <div class="rule-header">
        <CIcon :type="`c-xian-11`" class="g-mr6"></CIcon>
        <span class="g-font-14n1b500">初级数据评分</span>
      </div>
      <CTable :dataSource="dataSource" useDataSource :pagination="false" border :height="0">
        <vxe-column title="分值" width="60" field="scope"> </vxe-column>
        <vxe-column title="准确性（P）" width="120" field="p">
          <template #default="scope">
            <span :class="isApplicability(scope.row.p) ? 'g-font-14n2' : 'g-font-14n3'">
              {{ scope.row.p }}</span
            >
          </template>
        </vxe-column>
        <vxe-column title="时间代表性(TiR)" min-width="120" field="tir">
          <template #default="scope">
            <span :class="isApplicability(scope.row.tir) ? 'g-font-14n2' : 'g-font-14n3'">
              {{ scope.row.tir }}</span
            >
          </template>
        </vxe-column>
        <vxe-column title="技术代表性(TeR)" min-width="120" field="ter">
          <template #default="scope">
            <span :class="isApplicability(scope.row.ter) ? 'g-font-14n2' : 'g-font-14n3'">
              {{ scope.row.ter }}</span
            >
          </template>
        </vxe-column>
        <vxe-column title="地域代表性(GeR)" min-width="120" field="ger">
          <template #default="scope">
            <span :class="isApplicability(scope.row.ger) ? 'g-font-14n2' : 'g-font-14n3'">
              {{ scope.row.ger }}</span
            >
          </template>
        </vxe-column>
      </CTable>
      <div class="rule-header">
        <CIcon :type="`c-xian-21`" class="g-mr6"></CIcon>
        <span class="g-font-14n1b500">次级数据评分</span>
      </div>
      <CTable :dataSource="dataSource2" useDataSource :pagination="false" border :height="0">
        <vxe-column title="分值" width="70" field="scope"> </vxe-column>
        <vxe-column title="时间代表性(TiR)" min-width="120" field="tir">
          <template #default="scope">
            <span :class="isApplicability(scope.row.tir) ? 'g-font-14n2' : 'g-font-14n3'">
              {{ scope.row.tir }}</span
            >
          </template>
        </vxe-column>
        <vxe-column title="技术代表性(TeR)" min-width="120" field="ter">
          <template #default="scope">
            <span :class="isApplicability(scope.row.ter) ? 'g-font-14n2' : 'g-font-14n3'">
              {{ scope.row.ter }}</span
            >
          </template>
        </vxe-column>
        <vxe-column title="地域代表性(GeR)" min-width="120" field="ger">
          <template #default="scope">
            <span :class="isApplicability(scope.row.ger) ? 'g-font-14n2' : 'g-font-14n3'">
              {{ scope.row.ger }}</span
            >
          </template>
        </vxe-column>
      </CTable>
    </div>
  </CDrawer>
</template>

<script lang="ts" setup name="DqrDrawer">
import { defineProps, defineEmits, computed, ref } from 'vue';
import { CDrawer } from '@/components/CDrawer';
import { CTable } from '@/components/CTable/index';

interface ModelDetailDrawerLayoutProps {
  visible: boolean;
}

const props = defineProps<ModelDetailDrawerLayoutProps>();
const emits = defineEmits(['update:visible', 'close']);
const isApplicability = (text: string) => {
  return text !== '不适用';
};
const dataSource = [
  {
    scope: '1',
    p: '测量/计算并且外部验证',
    tir: '数据参考最近的年管理期中，环境足迹报告公布的数据',
    ter: '基本流和活动数据准确地反映最新创建数据集的技术',
    ger: '活动数据和基本流准确地反映这个最新创建的数据集中的模型化工序的使用地区'
  },
  {
    scope: '2',
    p: '测量/计算并且内部验证，可信度由审查员检查',
    tir: '数据参考最多两个年度管理期中，环境足迹报告公布的数据',
    ter: '基本流和活动数据可以代表最新创建数据集的技术',
    ger: '活动数据和基本流大致反映这个最新创建的数据集中的模型化工序的使用地区'
  },
  {
    scope: '3',
    p: '测量/计算/文献并且可信度未经审查员检查，或者基于计算的有保留的估算并且可信度由审查员检查',
    tir: '数据参考最多三个年度管理期中，环境足迹报告公布的数据',
    ter: '不适用',
    ger: '不适用'
  },
  {
    scope: '4-5',
    p: '不适用',
    tir: '不适用',
    ter: '不适用',
    ger: '不适用'
  }
];
const dataSource2 = [
  {
    scope: '1',
    tir: '环境足迹报告发布的日期在数据集的有效期内',
    ter: '在环境足迹研究中使用的技术与数据集范围内的技术完全相同',
    ger: '环境足迹研究中模拟的工序在数据集有效的国家有应用'
  },
  {
    scope: '2',
    tir: '环境足迹报告发布的日期不晚于数据集有效期的2年',
    ter: '在环境足迹研究中使用的技术包括在数据集范围内的技术组合中',
    ger: '环境足迹研究中模拟的工序在数据集有效的一些地区（如欧洲）有应用'
  },
  {
    scope: '3',
    tir: '环境足迹报告发布的日期不晚于数据集有效期的4年',
    ter: '在环境足迹研究中使用的技术只有部分包括在数据集范围内的技术组合中',
    ger: '环境足迹研究中模拟的工序在数据集有效的其中一个地区有应用'
  },
  {
    scope: '4',
    tir: '环境足迹报告发布的日期不晚于数据集有效期的6年',
    ter: '在环境足迹研究中使用的技术与数据集范围内的技术类似',
    ger: '环境足迹研究中模拟的工序应用的国家不属于数据集有效的地区，但是地区间的相似性基于专家的判断进行了充分的评估'
  },
  {
    scope: '5',
    tir: '环境足迹报告发布的日期超过数据集有效期的6年，或是数据集的有效期不明确',
    ter: '在环境足迹研究中使用的技术与数据集范围内的技术不同',
    ger: '环境足迹研究中模拟的工序在数据集有效的国家中没有应用'
  }
];
const drawerVisible = computed({
  get: () => {
    return props.visible;
  },
  set: (value: boolean) => {
    emits('update:visible', value);
  }
});

const handleClose = () => {
  emits('close');
};
</script>

<style lang="scss" scoped>
.rule-wrap {
  padding: 0 20px 20px;
}
.rule-header {
  width: 100%;
  height: 48px;
  background: #ffffff;
  display: flex;
  align-items: center;
}
</style>
